<template>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="70" label-position="right">
        <FormItem label="角色名称" prop="role_name">
            <Input type="text" v-model="formValidate.role_name"></Input>
        </FormItem>
        <FormItem label="描述" prop="description">
            <Input type="text" v-model="formValidate.description"></Input>
        </FormItem>  
        <FormItem label="权限">
            <Transfer
            :data="data"
            :target-keys="targetKeys"           
            @on-change="onChange"></Transfer>
        </FormItem>       
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">确定</Button>
        </FormItem>
    </Form>
</template>
<script>

export default {
    name: 'roleinfo',
    props: ['formValidate'],
    data(){
        return {            
            data: [{ "key": "1", "label": "Content 1", "disabled": false },
                    { "key": "2", "label": "Content 2", "disabled": false },
                    { "key": "3", "label": "Content 3", "disabled": false }],
            targetKeys: [],
            ruleValidate:{
                role_name:[
                    { required: true, message: '请输入角色名称', trigger: 'blur' }
                ],
                description:[
                    { required: true, message: '请输入角色描述', trigger: 'blur' }
                ]
            }       
        }
    },
    methods: {
        render4 (item) {
            return item.key + ':' + item.label;
        },
        onChange (newTargetKeys) {
            this.targetKeys = newTargetKeys;
        }, 
        addRole(){
            this.$axios({
                mothod: 'post',
                url: 'http://127.0.0.1/public/api/role/create',
                params: this.formValidate
            }).then((response)=> { 
                this.$Message.success('录入成功!'); 
            })
            .catch(function (error) {
                this.$Message.error('录入失败!');
            });   
        },
        editRole(){
            this.$axios({
                mothod: 'post',
                url: 'http://localhost/public/api/role/update',
                params: this.formValidate
            }).then((response)=> { 
                this.$Message.success('编辑成功!'); 
            })
            .catch(function (error) {
                this.$Message.error('编辑失败!');
            });   
        },                 
        handleSubmit(name){                 
            this.$refs[name].validate((valid) => {                   
                if (valid) {                                 
                    if(this.formValidate.id != ""){
                        this.editRole(); 
                    }else{
                        this.addRole();                                 
                    }  
                    this.$emit('updateRoleList');    
                    this.$emit('closeDialog');              
                } else {
                    this.$Message.error('提交失败!');
                }
            })
        }
    }
}
</script>
